<template>

	<view class="normal-login-container">

		<image class="deco1" src="/static/img/deco1.png" mode=""></image>
		<image class="deco2" src="/static/img/deco2.png" mode=""></image>
		<view>
			<!-- <view class="title">
				圣牧有机店主订购
			</view> -->
			<view class="logo1">

				<image src="/static/img/logo.png" mode=""></image>
			</view>
			<view class="subTit">
				圣牧有机店主订购平台
			</view>
			<view class="login-form-content">
				<view class="input-item u-flex">

					<input v-model="loginForm.phone" class="input" type="text" placeholder="请输入手机号码" maxlength="11" />
				</view>

				<view class="action-btn">
					<button @click="$u.throttle(handleLogin, 500)" class="login-btn" shape="square"
						:ripple="true">注册/登录</button>
				</view>
			</view>
			<div style="padding:15rpx 0 0;">
				<!-- <view class="register">
					<navigator class="register-link" url="reg" open-type="navigate">人脸活体</navigator>
				</view> -->
				<!-- <view class="register">
					<navigator class="register-link" url="forget" open-type="navigate">忘记密码</navigator>
				</view> -->
			</div>

		</view>

		<view class="">
			<view class="xieyi text-center">

				<checkbox label-size="28" v-model="checked">我已阅读并同意</checkbox><text
					@click="handlePrivacy('https://devattend.xaryxx.com/resources/term/ygznkqxtyhxy.html','用户协议')"
					class="text-blue">《用户协议》</text>
				<text @click="handlePrivacy('https://devattend.xaryxx.com/resources/term/ygznkqxtyszc.html','隐私政策')"
					class="text-blue">《隐私政策》</text>
			</view>

		</view>

		<!-- <u-modal title="提示" width="80%" class="modal" v-model="show" :mask-close-able="true" confirm-text="同意并继续"
			:show-cancel-button="true" @confirm="xyConfirm">
			
			<view class="modal-xy">
				我已仔细阅读并同意
				<text @click="handlePrivacy('https://devattend.xaryxx.com/resources/term/ygznkqxtyhxy.html','用户协议')"
					class="text-blue">
					《用户协议》
				</text>
				及
				<text @click="handlePrivacy('https://devattend.xaryxx.com/resources/term/ygznkqxtyszc.html','隐私政策')"
					class="text-blue">
					《隐私政策》
				</text>
				的全部条款与内容。
			</view>
		</u-modal> -->
	</view>
</template>

<script>
	export default {

		data() {
			const systemInfo = uni.getSystemInfoSync();
			return {
				show: false,
				checked: false,
				codeUrl: "",
				systemInfo: systemInfo,
				captchaEnabled: true,
				register: false,
				globalConfig: getApp().globalData.config,
				loginForm: {
					username: "A10086",
					password: 123456
				},
			}
		},
		created() {},
		onShow() {

		},
		onUnload() {

		},
		methods: {

			// 隐私协议
			handlePrivacy(url, title) {
				uni.navigateTo({
					url: "/pages/common/webview?url=" + url + '&title=' + title,
				});
			},
			// 用户协议
			handleUserAgrement() {
				// let site = this.globalConfig.appInfo.agreements[1]
				// this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			// 登录方法
			async handleLogin() {
				// if (this.loginForm.phone === undefined) {
				// 	this.$u.toast('请输入手机号码');
				// 	return;
				// }


				// if (!this.$u.test.mobile(this.loginForm.phone)) {
				// 	this.$u.toast('请输入正确的手机号码');
				// 	return;
				// }

				if (!this.checked) {
					this.show = true
					return;
				}
				this.pwdLogin()
			},
			xyConfirm() {
				console.log(4444);
				this.checked = true
				this.pwdLogin()
			},
			// 密码登录
			async pwdLogin() {


				console.log(5555);

				const params = {
					clientId: this.vuex_config.clientId,
					grantType: "apppassword",
					password: this.loginForm.password,
					tenantId: "000000",
					username: this.loginForm.username,
					registrationId: this.vuex_registerID
				}
				console.error(params, 9988888888)

				this.$u.api.login(params)
					.then(res => {
						console.log(res, 222222222)
						this.$u.vuex('vuex_token', res.data?.access_token);
						this.$u.vuex('vuex_clientId', res.data?.client_id);

						this.loginSuccess()
					});
			},
			// 登录成功后，处理函数
			async loginSuccess() {
				this.$u.toast('登录成功！');
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/sys/door/user"
					});
				}, 500);
			},
		}
	}
</script>
<style>
	page {
		background: linear-gradient(180deg, #E7F1FF 0%, #FFFFFF 100%);
	}
</style>

<style lang="scss" scoped>
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
		padding-top: 80rpx;
	}

	.logo1 {
		image {
			width: 180rpx;
			height: 180rpx;
			display: block;
			margin: 200rpx auto 80rpx;
		}

	}

	.subTit {
		ont-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 45rpx;
		color: #000000;
		text-align: center;
	}

	.modal {
		width: 80%;

		.title {
			font-size: 28rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
		}

		.modal-xy {
			text-align: justify;
			padding: 40rpx;
			// height: 100rpx;
			// line-height: 100rpx;
			// text-align: center;
			font-family: PingFang SC, PingFang SC;

			font-size: 28rpx;
			color: #000000;
		}
	}

	.normal-login-container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;

		// min-height: 90vh;
		.deco1 {
			position: absolute;
			width: 195rpx;
			height: 357rpx;
			left: 0rpx;
			top: 30rpx;
		}

		.deco2 {
			position: absolute;
			width: 104rpx;
			height: 297rpx;
			right: 0rpx;
			top: 239rpx;
		}

		.image-container {
			position: relative;
			width: 100%;
			height: 440rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;

			.login-image {
				width: 100%;
				height: 100%;
			}


			.login-text-s {
				position: absolute;
				top: 270rpx;
				left: 70rpx;
			}
		}

		.login-discribe {
			margin-top: 73rpx;
			padding: 0 70rpx;
			font-size: 32rpx;
			font-weight: 600;
		}

		.login-form-content {
			margin-top: 142rpx;
			text-align: center;
			width: 100%;
			padding: 0 65rpx;

			.input-item {
				margin: 0 auto 70rpx;
				width: 610rpx;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 50rpx;
				display: flex;
				align-items: center;

				.icon {
					font-size: 38rpx;
					margin-left: 40rpx;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}
			}

			.login-btn {
				width: 610rpx;
				height: 96rpx;
				background: #005850;
				box-shadow: 0rpx 12rpx 9rpx 4rpx rgba(0, 19, 126, 0.11);
				border-radius: 50rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 58rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}


		.text-blue {
			font-size: 28rpx;
			color: #005850;
			margin-left: 8rpx;
		}

		.login-icon {
			width: 46rpx;
			margin-left: 40rpx;
		}
	}

	.register {
		display: inline-block;
		color: #005850;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		float: right;
		padding: 20rpx 70rpx;
	}

	.register-link {
		font-size: 28rpx;
		float: right;
		padding: 0 16rpx;
	}

	.xieyi {
		margin-top: 260rpx;
		text-align: center;
		width: 100%;
		font-family: PingFang SC;
		font-weight: 400;

		color: #666666;
		display: flex;
		align-items: center;
		justify-content: center;
		// line-height: 58rpx;
	}
</style>